<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <title>Document</title>
    <script>
        $(function(){
            var jTbody=$("tbody");
            var jBtnAdd=$(".btn-add");

            jBtnAdd.on("click",function(){
                var name=$(".input-name").val();
                var xingji=$(".input-xingji").val();
                var year=$(".input-year").val();
                var html="<tr><td>" + name + "</td><td>" + xingji + "</td><td>" + year + "</td><td>" +
                    "<button class='btn-del'>删除</button>" + "</td></tr>";
                    var jHtml=$(html);
                    jHtml.appendTo(jTbody);
                    var btnDels=$(".btn-del");
                    btnDels.on("click",function(){
                        var tr=$(this).parents("tr");
                        tr.remove();
                    })
            })
        })
    </script>
</head>
<body>
    电影名字:<input type="text" class="input-name"/>
    电影的星级:<input type="text" class="input-xingji"/>
    电影出品年份<input type="text" class="input-year"/>
    <button class="btn-add">添加</button>
    <table>
        <thead>
            <tr>
                <th>电影名字</th>
                <th>电影的星级</th>
                <th>电影出品年份</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
</html>